---
import { getCollection } from "astro:content";
import Layout from "../../layouts/Layout.astro";

// Generate a new path for every collection entry
export async function getStaticPaths() {
  const blogEntries = await getCollection("blog");
  return blogEntries.map((entry) => ({
    params: { slug: entry.slug },
    props: { entry },
  }));
}

// Get the entry directly from the prop on render
const { entry } = Astro.props;
const { Content } = await entry.render();

// 获取其他文章用于推荐
const allBlogEntries = await getCollection("blog");
const otherEntries = allBlogEntries.filter(e => e.slug !== entry.slug).slice(0, 4);
---

<Layout title={entry.data.title} description={entry.data.snippet || "172号卡资讯"}>
  <!-- 阅读进度条 -->
  <div id="reading-progress" class="fixed top-0 left-0 w-0 h-1 bg-gradient-to-r from-primary to-blue-600 z-50 transition-all duration-300"></div>
  
  <!-- ====== Blog Details Section Start -->
  <section class="pt-20 pb-10 lg:pt-[120px] lg:pb-20 dark:bg-dark">
    <div class="container">
      <!-- 返回按钮 -->
      <div class="mb-8">
        <a href="/blog" class="inline-flex items-center text-primary hover:text-blue-600 transition-colors duration-300">
          <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
          </svg>
          返回博客列表
        </a>
      </div>

      <!-- 左右布局容器 -->
      <div class="flex flex-wrap lg:flex-nowrap gap-8">
        
        <!-- 左侧主要内容区域 -->
        <div class="w-full lg:w-2/3">
          <article class="wow fadeInUp bg-white dark:bg-dark-2 shadow-sm overflow-hidden" data-wow-delay=".1s">
            <!-- 文章头部 -->
            <div class="relative h-48 md:h-64 bg-gradient-to-r from-primary/10 to-blue-600/10 flex items-center justify-center">
              <div class="text-center">
                <div class="w-16 h-16 mx-auto mb-3 bg-primary/20 flex items-center justify-center">
                  <svg class="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"></path>
                  </svg>
                </div>
                <p class="text-sm text-body-color dark:text-dark-6">172号卡资讯</p>
              </div>
            </div>

            <div class="p-6 md:p-8">
              <!-- 文章标题 -->
              <h1 class="mb-6 text-2xl font-bold text-dark dark:text-white sm:text-3xl md:text-4xl leading-tight">
                {entry.data.title}
              </h1>
              
              <!-- 文章元信息 -->
              <div class="mb-6 p-4 bg-gray-50 dark:bg-dark-3">
                <div class="flex flex-wrap items-center gap-4 text-sm text-body-color dark:text-dark-6">
                  <div class="flex items-center">
                    <div class="w-6 h-6 bg-primary/20 flex items-center justify-center mr-2">
                      <svg class="w-3 h-3 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                      </svg>
                    </div>
                    <span class="font-medium">{new Date(entry.data.publishDate).toLocaleDateString('zh-CN')}</span>
                  </div>
                  
                  <div class="flex items-center">
                    <div class="w-6 h-6 bg-primary/20 flex items-center justify-center mr-2">
                      <svg class="w-3 h-3 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                      </svg>
                    </div>
                    <span class="font-medium">172号卡</span>
                  </div>

                  <div class="flex items-center">
                    <div class="w-6 h-6 bg-primary/20 flex items-center justify-center mr-2">
                      <svg class="w-3 h-3 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                      </svg>
                    </div>
                    <span class="font-medium">约 5 分钟阅读</span>
                  </div>
                </div>

                <!-- 文章摘要 -->
                {entry.data.snippet && (
                  <div class="mt-4 p-3 bg-white dark:bg-dark-2 border-l-4 border-primary">
                    <p class="text-body-color dark:text-dark-6 italic text-sm">{entry.data.snippet}</p>
                  </div>
                )}
              </div>
              
              <!-- 文章内容 -->
              <div id="article-content" class="prose prose-base max-w-none dark:prose-invert prose-headings:text-dark dark:prose-headings:text-white prose-p:text-body-color dark:prose-p:text-dark-6 prose-a:text-primary prose-a:no-underline hover:prose-a:underline prose-strong:text-dark dark:prose-strong:text-white prose-blockquote:border-primary prose-blockquote:bg-gray-50 dark:prose-blockquote:bg-dark-3 prose-blockquote:not-italic prose-code:text-primary prose-code:bg-gray-100 dark:prose-code:bg-dark-3 prose-pre:bg-gray-900 prose-pre:text-gray-100">
                <Content />
              </div>

              <!-- 分享按钮 -->
              <div class="mt-8 pt-6 border-t border-gray-200 dark:border-dark-3">
                <h3 class="text-base font-semibold text-dark dark:text-white mb-3">分享这篇文章</h3>
                <div class="flex flex-wrap gap-2">
                  <button onclick="shareToWeChat()" class="inline-flex items-center px-3 py-2 bg-green-500 hover:bg-green-600 text-white transition-colors duration-300 text-sm">
                    <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 24 24">
                      <path d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 0 0 .167-.054l1.903-1.114a.864.864 0 0 1 .717-.098 10.16 10.16 0 0 0 2.837.403c.276 0 .543-.027.811-.05-.857-2.578.157-4.972 1.932-6.446 1.703-1.415 3.882-1.98 5.853-1.838-.576-3.583-4.196-6.348-8.596-6.348zM5.785 5.991c.642 0 1.162.529 1.162 1.18 0 .659-.52 1.188-1.162 1.188-.642 0-1.162-.529-1.162-1.188 0-.651.52-1.18 1.162-1.18zm5.813 0c.642 0 1.162.529 1.162 1.18 0 .659-.52 1.188-1.162 1.188-.642 0-1.162-.529-1.162-1.188 0-.651.52-1.18 1.162-1.18z"/>
                    </svg>
                    微信
                  </button>
                  
                  <button onclick="shareToWeibo()" class="inline-flex items-center px-3 py-2 bg-red-500 hover:bg-red-600 text-white transition-colors duration-300 text-sm">
                    <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 24 24">
                      <path d="M9.31 8.17c-2.77-.3-5.21 1.12-5.45 3.18-.25 2.05 1.73 4.05 4.5 4.35 2.77.3 5.21-1.12 5.45-3.18.25-2.05-1.73-4.05-4.5-4.35zm-1.73 5.65c-.61.15-1.24-.2-1.4-.78-.16-.58.17-1.16.78-1.31.61-.15 1.24.2 1.4.78.16.58-.17 1.16-.78 1.31zm2.44-.29c-.25.06-.5-.08-.56-.32-.06-.24.07-.48.32-.54.25-.06.5.08.56.32.06.24-.07.48-.32.54z"/>
                    </svg>
                    微博
                  </button>
                  
                  <button onclick="copyLink()" class="inline-flex items-center px-3 py-2 bg-gray-500 hover:bg-gray-600 text-white transition-colors duration-300 text-sm">
                    <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
                    </svg>
                    复制链接
                  </button>
                </div>
              </div>
            </div>
          </article>
        </div>

        <!-- 右侧边栏 -->
        <div class="w-full lg:w-1/3">
          <div class="sticky top-24 space-y-6">
            
            <!-- 目录导航 -->
            <div class="bg-white dark:bg-dark-2 shadow-sm p-6">
              <h3 class="text-lg font-semibold text-dark dark:text-white mb-4 flex items-center">
                <svg class="w-5 h-5 mr-2 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"></path>
                </svg>
                文章目录
              </h3>
              <div id="table-of-contents" class="space-y-2 text-sm">
                <!-- 目录将通过JavaScript动态生成 -->
              </div>
            </div>

            <!-- 作者信息 -->
            <div class="bg-white dark:bg-dark-2 shadow-sm p-6">
              <h3 class="text-lg font-semibold text-dark dark:text-white mb-4 flex items-center">
                <svg class="w-5 h-5 mr-2 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                </svg>
                作者信息
              </h3>
              <div class="flex items-center space-x-4">
                <div class="w-12 h-12 bg-primary/20 flex items-center justify-center">
                  <svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                  </svg>
                </div>
                <div>
                  <h4 class="font-semibold text-dark dark:text-white">172号卡</h4>
                  <p class="text-sm text-body-color dark:text-dark-6">172号卡专栏作者</p>
                </div>
              </div>
              <p class="mt-3 text-sm text-body-color dark:text-dark-6">
                专注于172号卡相关资讯和技术分享，为用户提供最新最全的号卡信息。
              </p>
            </div>

            <!-- 相关推荐 -->
            <div class="bg-white dark:bg-dark-2 shadow-sm p-6">
              <h3 class="text-lg font-semibold text-dark dark:text-white mb-4 flex items-center">
                <svg class="w-5 h-5 mr-2 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                </svg>
                推荐阅读
              </h3>
              <div class="space-y-4">
                {otherEntries.map((otherEntry) => (
                  <a href={`/blog/${otherEntry.slug}`} class="group block">
                    <div class="p-3 bg-gray-50 dark:bg-dark-3 hover:bg-gray-100 dark:hover:bg-dark-1 transition-colors duration-300">
                      <h4 class="font-medium text-dark dark:text-white group-hover:text-primary transition-colors duration-300 text-sm mb-1 line-clamp-2">
                        {otherEntry.data.title}
                      </h4>
                      <p class="text-xs text-body-color dark:text-dark-6 line-clamp-2">
                        {otherEntry.data.snippet || "阅读更多精彩内容..."}
                      </p>
                      <div class="flex items-center mt-2 text-xs text-body-color dark:text-dark-6">
                        <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                        </svg>
                        {new Date(otherEntry.data.publishDate).toLocaleDateString('zh-CN')}
                      </div>
                    </div>
                  </a>
                ))}
              </div>
            </div>

            <!-- 标签云 -->
            <div class="bg-white dark:bg-dark-2 shadow-sm p-6">
              <h3 class="text-lg font-semibold text-dark dark:text-white mb-4 flex items-center">
                <svg class="w-5 h-5 mr-2 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
                </svg>
                热门标签
              </h3>
              <div class="flex flex-wrap gap-2">
                <span class="px-3 py-1 bg-primary/10 text-primary text-xs hover:bg-primary/20 transition-colors duration-300 cursor-pointer">172号卡</span>
                <span class="px-3 py-1 bg-primary/10 text-primary text-xs hover:bg-primary/20 transition-colors duration-300 cursor-pointer">使用指南</span>
                <span class="px-3 py-1 bg-primary/10 text-primary text-xs hover:bg-primary/20 transition-colors duration-300 cursor-pointer">技术支持</span>
                <span class="px-3 py-1 bg-primary/10 text-primary text-xs hover:bg-primary/20 transition-colors duration-300 cursor-pointer">常见问题</span>
                <span class="px-3 py-1 bg-primary/10 text-primary text-xs hover:bg-primary/20 transition-colors duration-300 cursor-pointer">最新资讯</span>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- ====== Blog Details Section End -->


</Layout>

<script>
  // 阅读进度条
  function updateReadingProgress() {
    const article = document.getElementById('article-content');
    const progressBar = document.getElementById('reading-progress');
    
    if (!article || !progressBar) return;
    
    const articleTop = article.offsetTop;
    const articleHeight = article.offsetHeight;
    const windowHeight = window.innerHeight;
    const scrollTop = window.pageYOffset;
    
    const progress = Math.min(100, Math.max(0, 
      ((scrollTop - articleTop + windowHeight) / articleHeight) * 100
    ));
    
    progressBar.style.width = progress + '%';
  }



  // 生成目录
  function generateTableOfContents() {
    const article = document.getElementById('article-content');
    const tocContainer = document.getElementById('table-of-contents');
    
    if (!article || !tocContainer) return;
    
    const headings = article.querySelectorAll('h1, h2, h3, h4, h5, h6');
    
    if (headings.length === 0) {
      tocContainer.innerHTML = '<p class="text-body-color dark:text-dark-6 text-sm">暂无目录</p>';
      return;
    }
    
    let tocHTML = '';
    headings.forEach((heading, index) => {
      const id = `heading-${index}`;
      heading.id = id;
      
      const level = parseInt(heading.tagName.charAt(1));
      const indent = (level - 1) * 12;
      
      tocHTML += `
        <a href="#${id}" class="block py-1 text-body-color dark:text-dark-6 hover:text-primary transition-colors duration-300 text-sm" style="padding-left: ${indent}px;">
          ${heading.textContent}
        </a>
      `;
    });
    
    tocContainer.innerHTML = tocHTML;
  }

  // 分享功能
  function shareToWeChat() {
    alert('微信分享功能需要在微信环境中使用');
  }

  function shareToWeibo() {
    const url = encodeURIComponent(window.location.href);
    const title = encodeURIComponent(document.title);
    window.open(`https://service.weibo.com/share/share.php?url=${url}&title=${title}`, '_blank');
  }

  function copyLink() {
    navigator.clipboard.writeText(window.location.href).then(() => {
      alert('链接已复制到剪贴板');
    }).catch(() => {
      alert('复制失败，请手动复制链接');
    });
  }

  // 事件监听
  window.addEventListener('scroll', () => {
    updateReadingProgress();
  });



  // 初始化
  document.addEventListener('DOMContentLoaded', () => {
    updateReadingProgress();
    generateTableOfContents();
  });
</script>

<style>
  /* ====== 美化的 Markdown 样式 ====== */
  
  /* 基础排版 */
  .prose {
    line-height: 1.8;
    font-size: 16px;
    color: #374151;
  }
  
  .dark .prose {
    color: #d1d5db;
  }
  
  /* 标题样式美化 */
  .prose h1 {
    font-size: 2.25rem;
    font-weight: 800;
    margin-top: 0;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
  }
  
  .prose h2 {
    font-size: 1.875rem;
    font-weight: 700;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 3px solid #e5e7eb;
    position: relative;
    color: #1f2937;
  }
  
  .prose h2::before {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #3b82f6, #1d4ed8);
    border-radius: 2px;
  }
  
  .dark .prose h2 {
    border-bottom-color: #374151;
    color: #f9fafb;
  }
  
  .prose h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    color: #1f2937;
    position: relative;
    padding-left: 1rem;
  }
  
  .prose h3::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 4px;
    height: 1.5rem;
    background: linear-gradient(180deg, #3b82f6, #1d4ed8);
    border-radius: 2px;
  }
  
  .dark .prose h3 {
    color: #f3f4f6;
  }
  
  .prose h4 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    color: #374151;
  }
  
  .dark .prose h4 {
    color: #e5e7eb;
  }
  
  /* 段落样式 */
  .prose p {
    margin-bottom: 1.5rem;
    text-align: justify;
    text-justify: inter-ideograph;
  }
  
  /* 链接样式美化 */
  .prose a {
    color: #3b82f6;
    text-decoration: none;
    font-weight: 500;
    position: relative;
    transition: all 0.3s ease;
  }
  
  .prose a:hover {
    color: #1d4ed8;
    text-shadow: 0 0 8px rgba(59, 130, 246, 0.3);
  }
  
  .prose a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #3b82f6, #1d4ed8);
    transition: width 0.3s ease;
  }
  
  .prose a:hover::after {
    width: 100%;
  }
  
  /* 引用块美化 */
  .prose blockquote {
    padding: 1.5rem 2rem;
    margin: 2rem 0;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-left: 5px solid #3b82f6;
    border-radius: 0 0.75rem 0.75rem 0;
    position: relative;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    font-style: italic;
  }
  
  .dark .prose blockquote {
    background: linear-gradient(135deg, #1f2937, #111827);
    border-left-color: #3b82f6;
  }
  
  .prose blockquote::before {
    content: '"';
    font-size: 4rem;
    color: #3b82f6;
    position: absolute;
    top: -0.5rem;
    left: 1rem;
    font-family: serif;
    opacity: 0.3;
    line-height: 1;
  }
  
  .prose blockquote p {
    margin: 0;
    position: relative;
    z-index: 1;
  }
  
  /* 代码样式美化 */
  .prose code {
    padding: 0.25rem 0.5rem;
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    color: #dc2626;
    border-radius: 0.375rem;
    font-size: 0.875em;
    font-weight: 600;
    border: 1px solid #e2e8f0;
  }
  
  .dark .prose code {
    background: linear-gradient(135deg, #374151, #1f2937);
    color: #fbbf24;
    border-color: #4b5563;
  }
  
  .prose pre {
    background: #1e293b !important;
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin: 2rem 0;
    overflow-x: auto;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 1px solid #334155;
  }
  
  .prose pre code {
    background: none;
    color: #e2e8f0;
    padding: 0;
    border: none;
    font-weight: normal;
  }
  
  /* 列表样式美化 */
  .prose ul {
    margin: 1.5rem 0;
    padding-left: 0;
  }
  
  .prose ul li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 0.75rem;
    list-style: none;
  }
  
  .prose ul li::before {
    content: '';
    position: absolute;
    left: 0.5rem;
    top: 0.75rem;
    width: 6px;
    height: 6px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    border-radius: 50%;
    transform: translateY(-50%);
  }
  
  .prose ol {
    margin: 1.5rem 0;
    padding-left: 0;
    counter-reset: list-counter;
  }
  
  .prose ol li {
    position: relative;
    padding-left: 2.5rem;
    margin-bottom: 0.75rem;
    list-style: none;
    counter-increment: list-counter;
  }
  
  .prose ol li::before {
    content: counter(list-counter);
    position: absolute;
    left: 0;
    top: 0;
    width: 1.5rem;
    height: 1.5rem;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
  }
  
  /* 表格样式美化 */
  .prose table {
    width: 100%;
    margin: 2rem 0;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  }
  
  .dark .prose table {
    background: #1f2937;
  }
  
  .prose table th {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    border: none;
  }
  
  .prose table td {
    padding: 1rem;
    border-bottom: 1px solid #e5e7eb;
    border-right: 1px solid #e5e7eb;
  }
  
  .dark .prose table td {
    border-color: #374151;
  }
  
  .prose table tr:last-child td {
    border-bottom: none;
  }
  
  .prose table td:last-child {
    border-right: none;
  }
  
  .prose table tr:nth-child(even) {
    background: #f8fafc;
  }
  
  .dark .prose table tr:nth-child(even) {
    background: #111827;
  }
  
  /* 强调文本样式 */
  .prose strong {
    font-weight: 700;
    color: #1f2937;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
  }
  
  .dark .prose strong {
    color: #f9fafb;
    background: linear-gradient(135deg, #92400e, #b45309);
  }
  
  /* 分隔线样式 */
  .prose hr {
    margin: 3rem 0;
    border: none;
    height: 2px;
    background: linear-gradient(90deg, transparent, #3b82f6, transparent);
    border-radius: 1px;
  }
  
  /* 图片样式美化 */
  .prose img {
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    margin: 2rem 0;
    transition: transform 0.3s ease;
  }
  
  .prose img:hover {
    transform: scale(1.02);
  }
  
  /* 平滑滚动 */
  html {
    scroll-behavior: smooth;
  }
  
  /* 选择文本样式 */
  ::selection {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
  }

  /* 文本截断 */
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* 侧边栏粘性定位优化 */
  @media (min-width: 1024px) {
    .sticky {
      position: sticky;
      top: 6rem;
    }
  }
  
  /* 响应式优化 */
  @media (max-width: 768px) {
    .prose {
      font-size: 14px;
    }
    
    .prose h1 {
      font-size: 1.875rem;
    }
    
    .prose h2 {
      font-size: 1.5rem;
    }
    
    .prose h3 {
      font-size: 1.25rem;
    }
    
    .prose blockquote {
      padding: 1rem 1.5rem;
      margin: 1.5rem 0;
    }
    
    .prose pre {
      padding: 1rem;
      margin: 1.5rem 0;
    }
  }
  
  /* 动画效果 */
  .prose h2,
  .prose h3,
  .prose h4 {
    animation: fadeInUp 0.6s ease-out;
  }
  
  .prose p,
  .prose ul,
  .prose ol,
  .prose blockquote {
    animation: fadeIn 0.8s ease-out;
  }
  
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
</style>